<template>
  	<view class='login'>
      <!-- #ifdef MP-WEIXIN -->
      <top-nav title="登录"></top-nav>
      <!-- #endif -->
      <view class="login-box">
        <view class='login-main' >
          <view class='login-img'>
            <image src="../../static/logo.png" mode=""></image>
            <text>手机号登录</text>
          </view>
          <view class="login-text">首次登录手机号将在验证后生成新账号</view>
          <view class='login-phone' v-if="loginMode">
            <input type="tel" placeholder="请输入手机号"  v-model="phone">
          </view>
          <view class='login-name' v-else >
            <view class="login-list">
              <input type="input" placeholder="请输入用户名"  v-model="form.user" class="login-item">
            </view>
            <view class="login-list">
              <input type="password" placeholder="请输入密码"  v-model="form.psd" class="login-item">
            </view>
          </view>
          <view class="user-login" @click="loginMode = false"  v-if="loginMode">
            <text class="text">用户名验证码登录</text>
          </view>
          <view class="user-login" @click="loginMode = true"  v-else>
            <text class="text">手机号登录</text>
          </view>
          <view class='login-code' >
            <button :class="allFlag || !loginMode?'':'active'" @click="sendCode">{{loginMode?'发送短信验证码':'登录'}}</button>
          </view>
          <view class='login-msg'>
            <u-checkbox-group v-model="checkList">
              <u-checkbox  shape="circle" name="choose" :checked="flag"></u-checkbox>
              <view class='msg-text'>
                我已阅读并同意 <text>服务条款</text> 和 <text>隐私政策</text>
              </view>
            </u-checkbox-group>
          </view>
        </view>
              
      </view>
  </view>
</template>

<script>
  import topNav from '@/components/top-nav/top-nav.vue'
  import {loginByJson} from '@/api/login.js'
  import {Encrypt} from '@/utils/aes.js'
  import { mapMutations } from 'vuex'
  export default {
    components:{
      topNav
    },
    data() {
      return {
        checkList:[],
        flag:true,
        phone:'',
        buttonFlag:false,
        allFlag: false,
        loginMode:true,
        form:{
          user:'',
          psd:''
        }
      }
    },
    watch:{
      checkList(newV,oldV) {
        this.flag = newV.length>0?true:false 
        this.allFlag = this.flag && this.buttonFlag
      },
      phone(newV,oldV) {
        var reg = /^1[23456789]\d{9}$/;
        this.buttonFlag = reg.test(newV) 
        this.allFlag = this.flag && this.buttonFlag
      }
    },
    methods: {
      ...mapMutations(['setToken']),
      async sendCode() {
           // 手机验证码登录
         if(this.loginMode) {
           if(this.allFlag) {
             uni.navigateTo({
               url:`/pages/login/code?tel=${this.phone}`
             })
           }else if(!this.buttonFlag) {
             uni.showToast({
               title:'请填写正确的手机号',
               icon:'none'
             })
           }else {

             uni.showToast({
               title:'请勾选协议',
               icon:'none'
             })
           }
         }
         // 用户名登录
         else {
           // 先发送数据请求
                      console.log(123);
           var res = await loginByJson({
             username:Encrypt(this.form.user),
             password:Encrypt(this.form.psd)
           })
           // 登录成功以后拿到token，并跳转
           if(res.meta.code == '10006') {
            setToken(res.data?.accessToken)
             // uni.switchTab({
             //   url:'/pages/me/me'
             // })
           }


         }

       }
    }
  }
</script>

<style>
.login{
  position: relative;
	width: 100vw;
	height: 100vh;
	background: rgba(245,245,245,0.39);
}
.login-box{
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  
}
.login-main{
	flex:1;
	margin:0 58rpx;
}
.login-img{
	display: flex;
	align-items: center;
}
.login-img image{
	width: 83rpx;
	height: 83rpx;
}
.login-img text{
	padding-left: 22rpx;
	font-size: 56rpx;
	font-weight: bold;
	color: #343234;
}
.login-text{
	padding-top:45rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #343234;
	letter-spacing: 2rpx;
	opacity: 0.53;
}
.login-phone{
	padding-top:121rpx;
	padding-bottom:31rpx;
	border-bottom:2rpx solid #707070;
}
  
.login-name .login-list .login-item {
  border: 1px solid #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
  padding-left: 10rpx;
  box-sizing: border-box;
  margin: 10rpx 0;
  height: 60rpx;
  line-height: 60rpx;
}
.user-login {
  text-align: right;
  color: #666;
  line-height: 70rpx;
  font-size: 28rpx;
}
.login-code{
	padding-top:48rpx;
}
.login-code button{
	width: 100%;
	line-height: 100rpx;
	font-size: 33rpx;
	font-weight: bold;
	color: #FFFFFF;
	letter-spacing: 8rpx;
	opacity: 1;
	background-color:#337AFF;
}
.login-code button.active {
  background-color: #ccc;
}
.login-msg{
	padding-top:68rpx;
}
/deep/ .u-radio-group--row{
	justify-content: center;
	align-items: center;
}
.msg-text{
	font-size: 24rpx;
	font-weight: 400;
	color: #343234;
	letter-spacing: 2rpx;
}
.msg-text text{
	color:#0077FF;
}
</style>